<template>
	<view class="page">
		<!-- 自定义导航栏-->
		<Navbar title="我的海报"></Navbar>
		<view class="container">
			<poster ref="poster" :imageUrl="image" :imageWidth="750" :imageHeight="1000" :drawData="drawData"
				:code="code" :config="config" :wechatCode="false" @wechatCodeConfig="wechatCodeConfig"
				@click="createdPoster" @loading="onLoading" @success="onSuccess" @fail="onFail" class="poster">
			</poster>
		</view>
	</view>
</template>

<script>
	import poster from "@/uni_modules/yms-poster/components/yms-poster/yms-poster.vue";
	import {
		saveImageToPhotosAlbum
	} from '@/utils/poster.js';
	export default {
		components: {
			poster
		},
		data() {
			return {
				code:"https://horifon.oss-cn-shanghai.aliyuncs.com/hongyunartcenter/static/poster/user_share_299M8.png", //海报预览页面的二维码
				canvasImages: '', //创建成功的海报
				image:"https://horifon.oss-cn-shanghai.aliyuncs.com/hongyunartcenter/static/poster/%E7%BC%96%E7%BB%84%205%403x.png",
				config: {
					imageMode: 'aspectFit',
					posterHeight: '100%',
					// canvasWidth 和 convasHeight使用的是px，防止不同设备Dpr不统一，导致最后图片留白边问题
					canvasWidth: 275,
					convasHeight: 600,
				},
				drawData:[{
						type: 'image',
						config: {
							url: 'https://horifon.oss-cn-shanghai.aliyuncs.com/hongyunartcenter/static/poster/%E7%BC%96%E7%BB%84%205%403x.png',
							x: 0,
							y: 0,
							w: 275,
							h: 490
						},
					},
					{
						type: 'image',
						config: {
							url: 'https://horifon.oss-cn-shanghai.aliyuncs.com/hongyunartcenter/static/poster/user_share_299M8.png',
							x: 35,
							y: 350,
							w: 70,
							h:70
						},
					},
					{
						type: 'text',
						config: {
							text: '',
							x: 140,
							y: 60,
							color: '#E60012',
							font: 'normal bold 16px 仿宋',
							textAlign: 'center'
						}
					}
				],
				wechatCodeConfig: {
					serverUrl:'https://horifon.oss-cn-shanghai.aliyuncs.com/hongyunartcenter/static/poster/user_share_299M8.png',
					scene: '123123',
					config: {
						x: 84.5,
						y: 320,
						w: 100,
						h: 100
					}
				}
			}
		},
		created() {},
		onShow() {},
		methods: {
			// 保存到相册
			saveToAlbum() {
				this.$refs.poster.saveToAlbum()
			},
			onLoading() {
				console.log('Loading:正在加载静态资源')
			},
			onSuccess(e) {
				console.log('Success:创建海报成功', e)
				this.canvasImages = e
				wx.showShareImageMenu({
					path: this.canvasImages,
					style: "background-color:'black'"
				})
			},
			onFail(e) {
				console.log('Fail:创建海报失败', e)
			},
			createdPoster() {
				// 调用 cjian 开始创建海报
				this.$refs.poster.cjian()
			},
			share(e) {
				//如果需要自定义分享栏可以这样掉，本项目是直接调的wx.showShareImageMenu
				if (e === '微信好友') {
					wx.showShareImageMenu({
						path: this.canvasImages
					})

				} else if (e === '朋友圈') {
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 2,
						imageUrl: this.canvasImages,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else if (e === '保存图片') {
					saveImageToPhotosAlbum(this.canvasImages).then(res => {
						uni.showToast({
							icon: 'none',
							title: '保存成功'
						})
					}).catch(err => {

					})

				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.poster {
			width: 100%;
			height: 100%;
		}
	}
</style>